<template>
  <div class="tab-container">
    <!-- 左侧标签栏（带图标） -->
    <div class="tab-nav">
      <button
          v-for="tab in tabs"
          :key="tab.id"
          :class="{ active: currentTab === tab.id }"
          @click="currentTab = tab.id"
      >
        <span :class="tab.icon"></span> <!-- 图标 -->
        <span>{{ tab.name }}</span>
      </button>
    </div>

    <!-- 右侧商品列表（带图片和详情） -->
    <div class="product-list">
      <!-- 分类标题 -->
      <h2 class="category-title">
        {{ tabs.find(t => t.id === currentTab)?.name }} 专区
      </h2>

      <!-- 商品网格布局 -->
      <div class="product-grid">
        <div class="product-item" v-for="item in filteredProducts" :key="item.id">
          <!-- 商品图片 -->
          <div class="product-img">
            <img :src="item.img" :alt="item.name" />
            <span class="tag" v-if="item.tag">{{ item.tag }}</span>
          </div>

          <!-- 商品信息 -->
          <div class="product-info">
            <h3 class="product-name">{{ item.name }}</h3>
            <div class="rating">
              <span class="star" v-for="n in 5" :key="n" :class="{ filled: n <= item.rating }">★</span>
              <span class="sales">({{ item.sales }}人已购)</span>
            </div>
            <p class="price">¥{{ item.price }} <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span></p>
            <button class="buy-btn">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../utils/request';

export default {
  data() {
    return {
      currentTab: 'phone', // 标签ID（保留）
      // 标签数据（保留）
      tabs: [
        { id: 'phone', name: '手机', icon: 'icon-phone' },
        { id: 'laptop', name: '笔记本', icon: 'icon-laptop' },
        { id: 'accessory', name: '配件', icon: 'icon-accessory' }
      ],
      allProducts: [] // 2. 初始化为空数组（原有的模拟数据可删除，改为从接口获取）
    };
  },
  // 3. 组件创建时调用接口获取数据
  created() {
    this.fetchProducts(); // 调用自定义方法
  },
  methods: {
    // 4. 新增：获取商品列表的方法
    fetchProducts() {
      // 发送 GET 请求（接口路径根据实际后端地址调整）
      request.get('/products')
          .then((res) => {
            // 假设后端返回的数据格式为 { code: 200, data: [...] }
            if (res.code === 200) {
              this.allProducts = res.data; // 将接口返回的商品数据赋值给响应式变量
            }
          })
          .catch((error) => {
            console.error('获取商品失败：', error);
          });
    }
  },
  // 5. 保留原有的计算属性（筛选逻辑不变）
  computed: {
    filteredProducts() {
      return this.allProducts.filter(item => item.category === this.currentTab);
    }
  }
};
</script>

<style scoped>
/* 容器占满全屏 */
.tab-container {
  display: flex;
  min-height: calc(100vh - 300px); /* 减去Banner高度 */
  width: 100%;
  margin: 0;
}

/* 左侧标签栏 */
.tab-nav {
  width: 180px; /* 加宽标签栏 */
  background-color: #f8f9fa;
  padding: 20px 0;
  box-shadow: 1px 0 3px rgba(0,0,0,0.05);
}
.tab-nav button {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 25px;
  border: none;
  text-align: left;
  cursor: pointer;
  background: none;
  font-size: 16px;
  transition: all 0.2s;
}
.tab-nav button:hover {
  background-color: #f0f0f0;
}
.tab-nav button.active {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: 500;
}
/* 图标样式（模拟） */
.icon-phone::before { content: '📱'; margin-right: 10px; }
.icon-laptop::before { content: '💻'; margin-right: 10px; }
.icon-accessory::before { content: '🔌'; margin-right: 10px; }

/* 右侧商品列表 */
.product-list {
  flex: 1;
  padding: 30px;
  background-color: #fafafa;
}
.category-title {
  margin: 0 0 25px;
  font-size: 24px;
  color: #333;
  border-bottom: 2px solid #2196f3;
  padding-bottom: 10px;
  display: inline-block;
}
/* 商品网格布局 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}
/* 商品项 */
.product-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
/* 商品图片 */
.product-img {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.product-item:hover .product-img img {
  transform: scale(1.05);
}
/* 标签（新品/热销） */
.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ff5722;
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
}
/* 商品信息 */
.product-info {
  padding: 15px;
}
.product-name {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 评分星级 */
.rating {
  margin-bottom: 10px;
  font-size: 14px;
}
.star {
  color: #ddd;
}
.star.filled {
  color: #ffc107;
}
.sales {
  color: #999;
  margin-left: 5px;
  font-size: 12px;
}
/* 价格 */
.price {
  margin: 0 0 15px;
  font-size: 18px;
  color: #f44336;
  font-weight: bold;
}
.original-price {
  color: #999;
  text-decoration: line-through;
  font-size: 14px;
  font-weight: normal;
  margin-left: 8px;
}
/* 按钮 */
.buy-btn {
  width: 100%;
  background: #2196f3;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 14px;
}
.buy-btn:hover {
  background: #1976d2;
}
</style>